<section class="sidebar main_nav" id="menu_id">
    <div v-for="(n, i) in menu" :key="i" class="folder">
        <a :href='n.href' class="menu-box">
            <span class="icon_box"><i class="fa fa-home"></i></span>
            <span class="text">{{ n.title }}</span>
            <i class="icon-next fa fa-angle-right"></i>
        </a>
        <div v-if="n.child" class="flex-box sub-menu">
            <a v-for="(m, j) in n.child" :href="m.href" :class="{'active': isCurrent(m.url)}">{{ m.title }}</a>
        </div>
    </div>
</section>
<script src="/Public/Wap/js/vue.js"></script>
<script>
    var topBox = $('#jtopnav');
    var sideBox = $('.sidebar-menu');

    var createTop = function () {

    };
    var setBreadCrumb = function () {

    };


    // 初始化菜单
    var initMenu = function (menu, current) {
        // 创建主菜单
        // 创建菜单节点, 寻找当前菜单
        var m1, m2, m3, o1, o2, o2j, o3, e1, e2, eg, gco, mid, a1, a1Href;
    };


    var setBreadCrumb = function (current) {

        var m1, m2, m3, o1, o2, o2j, o3, e1, e2, eg, mid;

        // 遍历一级菜单
        for (var i = 0; i < MENU.length; i++) {
            o1 = MENU[i];
            // 遍历二级菜单
            if (!o1.child) { continue; }
            for (var x in o1.child) {
                o2 = o1.child[x];
                // 带分组的二级菜单
                if (o2.length !== undefined) {
                    for (var j = 0; j < o2.length; j++) {
                        // 分组下的二级菜单使用统一的图标
                        o2j = o2[j];
                        // 检查当前激活菜单
                        if (o2j.url.toLowerCase() == current) {
                            m1 = o1;
                            m2 = o2j;
                        }
                        // 在三级菜单中检查激活菜单
                        if (!m1 && o2j.child) {
                            for (var k = 0; k < o2j.child.length; k++) {
                                o3 = o2j.child[k];
                                if (o3.url.toLowerCase() == current) {
                                    m1 = o1;
                                    m2 = o2j;
                                    m3 = o3;
                                }
                            }
                        }
                    }
                } else {
                    // 检查当前激活菜单
                    if (o2.url.toLowerCase() == current) {
                        m1 = o1;
                        m2 = o2;
                    }
                    // 在三级菜单中检查激活菜单
                    if (!m1 && o2.child) {
                        for (var k = 0; k < o2.child.length; k++) {
                            o3 = o2.child[k];
                            if (o3.url.toLowerCase() == current) {
                                m1 = o1;
                                m2 = o2;
                                m3 = o3;
                            }
                        }
                    }
                }
            }
        }

        // <section class="content-header">
        //     <h1><i class=""></i>商铺管理</h1>
        //     <ol class="breadcrumb">
        //         <li><a href="/kcadmin/ZXShop/index.html" data-mid="231"><i class="fa fa-dashboard"></i> 大厦运营</a></li>
        //         <li><a href="#">商铺管理</a></li>
        //         <li><a href="#">商铺列表</a></li>
        //     </ol>
        // </section>

        var title = '';
        var navs = [];
        var icon = '';

        if (m1) {
            navs.push(m1);
        }

        if (m2) {
            if (m2.group) {
                navs.push({
                    'title': m2.group,
                    'href': 'javascript:viod(0);'
                });
            }
            icon = m2.tip;
            title = m2.title;
            navs.push(m2);
        }

        if (m3) {
            title += "[" + m3.title + "]";
            navs.push(m3);
        }

        var html, href, bli, bco, hco;
        var ch = $('.content-header:first');

        html = "<h1>";
        html += (icon && 0 ? '<i class="fa fa-' + icon + '"></i>' : '') + title;
        html += "</h1>";
        html += "<ol class='breadcrumb'>";

        for (var i = 0; i < navs.length; i++) {
            href = i == navs.length - 1 || i == 0 ? 'javascript:void(0);' : navs[i].href;
            bco = i == 0 ? '<i class="fa fa-dashboard"></i>' : '';
            html += '<li><a href="' + href + '">' + bco + navs[i].title + '</a></li>';
        }
        html += "</ol>";
        ch.html(html);
    };

</script>
<script>
    // 菜单
    var current = "<?php echo strtolower(CONTROLLER_NAME.'/'.ACTION_NAME) ?>";
    var MENU = <?php echo json_encode(getMenus()); ?>;
    initMenu(MENU, current);

</script>
<script>
    new Vue({
        el: '#menu_id',
        data: function () {
            return {
                menu: MENU,
                current: current
            }
        },
        methods: {
            isCurrent(url){
                return url.toLowerCase() == this.current;
            }
        }
    })
</script>
<style>
    .content-header>.breadcrumb {
        top: 5px;
    }

    .content-header>h1 {
        margin-top: 32px;
        padding-left: 15px;
    }

    .flex-box {
        display: flex;
        align-items: center;
    }

    .flex-column {
        display: flex;
        height: 100%;
        flex-direction: column;
    }

    .flex-1 {
        flex: 1;
    }

    .flex-box {
        display: flex;
    }

    .flex-box-column {
        display: flex;
        flex-direction: column;
    }

    .flex-around {
        display: flex;
        justify-content: space-around;
    }

    .flex-between {
        display: flex;
        justify-content: space-between;
    }

    .flex-lt {
        -webkit-align-self: flex-start;
        -moz-align-self: flex-start;
        align-self: flex-start;
    }

    .main-sidebar {
        background-color: #fff !important;
    }

    .icon_box {
        margin-right: 5px;
    }

    .icon_box i {
        font-size: 22px;
        font-weight: normal;
    }

    .sidebar {}

    .main-sidebar a {
        color: #333 !important;
    }

    .main_nav .folder:not(.main_nav_slide) {
        /* padding: 2px 0; */
        box-sizing: border-box;
        position: relative;
    }

    /*  */
    .sub-menu {
        width: 100%;
        flex-wrap: wrap;
        padding: 0 6px;
        /*padding-left: 27px;*/
    }

    .folder .text {
        flex: 1;
        font-size: 16px;
    }

    .sub-menu a {
        width: 50%;
        line-height: 40px;
        padding: 0 5%;
        font-size: 13px;
        color: #6D6D6D !important;
    }

    .sub-menu a:hover {
        background-color: #ECF6FF !important;
    }

    .menu-box {
        display: flex;
        align-items: center;
        padding: 10px 15px;
    }

    .active .menu-box {
        background-color: #40A1FA;
        color: #fff !important;
    }

    .active .icon-next {
        transform: rotate(90deg);
    }

    .sub-menu .active {
        color: #40A1FA !important;
    }
</style>